import Configer from "../../../script/frame/apiModel/config/Configer";
import {UIConfigKey} from "../../../script/constant/UIConfig";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, View} from "../../../script/frame/apiModel/gui/React";
import {Util} from "../../../script/utils/Util";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {ConfigKey} from "../../../script/constant/ConfigConstant";
import {LightButton} from "../component/LightButton";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {TextAlign} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";

export enum DamagePanelType {
    players = 1,
    pets,
}

export interface IProp {
    type: DamagePanelType;
    selectType: (type: DamagePanelType) => void;
    visible: boolean;
    hurts: { name: string, value: number }[];
}
export interface IState {
}

export default class DamagePanelBar extends React.Element<IProp, IState> {
    constructor(props: IProps & IProp) {
        super(props);
    }
    render = () => {
        const radix = 1.5;

        const textT = 0.00332;
        const textL = 0.00375;

        const titleFontSize = 0.00996 * radix;
        const lineFontSize = 0.00996 * radix;
        const itemH = 0.01660 * radix;
        const itemW = 0.09375 * radix;
        const marginH = 0.00249 * radix;
        const backSize = { h: 0.00830, w: itemW + 0.00625 };
        const backPadding = { t: 0.00830 * radix, l: 0.00313 * radix };

        const damageButtonY = Configer.getUIConfig(UIConfigKey.damageButtonY)
        const backPos = { x: 0, y: damageButtonY };

        const len = this.props.hurts ? this.props.hurts.length : 0;
        backSize.h = backSize.h + len * (itemH + marginH);

        let maxHurtsNum = 0;
        switch (this.props.type) {
            case DamagePanelType.players: {
                maxHurtsNum = PlayerFactory.getInstance().getAllPlayerNum();
                break;
            }
            case DamagePanelType.pets: {
                maxHurtsNum = Configer.getConfig(ConfigKey.maxPetNum) + 1;
                break;
            }
        }

        let tempHurts: { name: string, value: number }[] = [];
        for (let i = 0; i < maxHurtsNum; i++) {
            const hurt = this.props.hurts && this.props.hurts[i];
            if (hurt) {
                tempHurts.push(hurt)
            } else {
                tempHurts.push({name: '', value: -1})
            }
        }

        let maxValue = 0;
        for (let i = 0;  i < maxHurtsNum; i++) {
            const hurt = this.props.hurts[i];
            if (hurt) {
                const currentValue = hurt.value;
                if (currentValue > maxValue) {
                    maxValue = currentValue;
                }
            }
        }

        const valueW = 0.03125;

        const backgroundImage = Configer.getResource(ResourceKey.damagePanelBoard);

        const disable = Configer.getResource(ResourceKey.disableBlp);
        const leftUnSelected = Configer.getResource(ResourceKey.damagePanelLeftUnSelected);
        const leftSelected = Configer.getResource(ResourceKey.damagePanelLeftSelected);
        const rightUnSelected = Configer.getResource(ResourceKey.damagePanelRightUnSelected);
        const rightSelected = Configer.getResource(ResourceKey.damagePanelRightSelected);

        let petBack = rightUnSelected;
        let playerBack = leftUnSelected;
        if (this.props.type === DamagePanelType.players) {
            playerBack = leftSelected;
        } else if (this.props.type === DamagePanelType.pets) {
            petBack = rightSelected;
        }

        let petButton;

        const titleWidth = backSize.w - backPadding.l * 2;
        const usePet = Configer.getUIConfig(UIConfigKey.damageBarUsePet);
        if (usePet && usePet > 0) {
            petButton =  <View   key={GuiKeys.damagePanelTitlePetType} onMouseDown={() => { this.props.selectType(DamagePanelType.pets) }} style={{ marginL: 0.001, backgroundImage: petBack, fontSize: titleFontSize, height: itemH, width: titleWidth / 3, fontAlign: TextAlign.center }}>个人</View>
        }

        return <View   key = {GuiKeys.damagePanel} style={{ hidden: !this.props.visible, width: backSize.w,  left: backPos.x, top: backPos.y }}>
            <View   key = {GuiKeys.damagePanelTitle} style={{ height: itemH, width: backSize.w }}>
                {/*<View   key = {GuiKeys.damagePanelTitleText} style={{ fontSize: titleFontSize, height: itemH, width: backSize.w / 4 }}>伤害: </View>*/}
                <View   onMouseDown={() => { this.props.selectType(DamagePanelType.players) }} key = {GuiKeys.damagePanelTitlePlayerType} style={{ backgroundImage: playerBack, fontSize: titleFontSize, height: itemH, width: titleWidth / 3, fontAlign: TextAlign.center }}>玩家</View>
                { petButton }
            </View>
            <View   key = {GuiKeys.damagePanelHurts} style={{ backgroundImage, height: backSize.h, width: itemW }}>
                {
                    tempHurts?.map((hurt, index, array) => {
                        const text = hurt.name;
                        const value = hurt.value;

                        if (value && value >= 0) {
                            let lineW = titleWidth;
                            if (maxValue >= 0) {
                                lineW = (titleWidth * value) / maxValue;
                            }
                            const backgroundImage = Configer.getResource(ResourceKey.damagePanelLine);
                            const formatStr = Util.formatFormNumber(value);
                            const nameWidth = titleWidth - valueW - 2 * textL
                            return <View   key = {`${GuiKeys.damagePanelHurtItem}|${index}`}  style={{ marginT: marginH, width: itemW, height: itemH }}>
                                <View   key = {`${GuiKeys.damagePanelHurtLine}|${index}`} style={{ backgroundImage, width: lineW, height: itemH }}>
                                    <View   key = {`${GuiKeys.damagePanelHurtText}|${index}`} style={{  float: true, marginL: textL, marginT: textT, fontSize: lineFontSize, width: nameWidth, height: itemH - 2 * textT }}>{text}</View>
                                    <View   key = {`${GuiKeys.damagePanelHurtValue}|${index}`} style={{ float: true, marginL: nameWidth + textL, marginT: textT, fontSize: lineFontSize, height: itemH - 2 * textT, width: valueW }}>{formatStr}</View>
                                </View>
                            </View>
                        } else {
                            return <View   key = {`${GuiKeys.damagePanelHurtItem}|${index}`}  style={{ hidden: true }}>
                                <View   key = {`${GuiKeys.damagePanelHurtLine}|${index}`} style={{ hidden: true }}>
                                    <View   key = {`${GuiKeys.damagePanelHurtText}|${index}`} style={{  hidden: true }}></View>
                                    <View   key = {`${GuiKeys.damagePanelHurtValue}|${index}`} style={{ hidden: true }}></View>
                                </View>
                            </View>
                        }

                    })
                }
            </View>
        </View>
    }
    getVisible = (): boolean => {
        return this.props.visible;
    }
}